<template>
  <el-dialog
    class="dialog-class"
    v-bind="$attrs"
    :model-value="modelValue"
    :title="title"
    :width="width"
    @update:model-value="handleUpdateModelValue"
    @close="handleClose"
  >
    <div class="dialog-class__body">
      <slot name="header"
        ><div class="custome_header">
          <span>
            {{ title }}
          </span>
          <el-icon v-if="showClose" :size="14" color="#606266" @click="handleClose"><Close /></el-icon></div
      ></slot>

      <slot
        ><div>{{ content }}</div></slot
      >
    </div>
    <template v-if="showFooter" #footer>
      <slot name="footer"
        ><span class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="emitConfirm"> 确定 </el-button>
        </span></slot
      >
    </template>
  </el-dialog>
</template>

<script lang="ts">
import { Close } from '@element-plus/icons-vue'
import { defineComponent } from 'vue'
// import 'element-plus/es/components/message/style/css'
export default defineComponent({
  name: 'OyModal',
  components: {
    Close,
  },
  props: {
    title: {
      type: String,
      default: '',
    },
    width: {
      type: String,
      default: '1100px',
    },
    modelValue: {
      type: Boolean,
      default: false,
    },
    content: {
      type: String,
      default: '',
    },
    showFooter: {
      type: Boolean,
      default: true,
    },
    showClose: {
      type: Boolean,
      default: true,
    },
  },
  emits: ['update:modelValue', 'close', 'confirm'],
  setup(props, { emit }) {
    const handleUpdateModelValue = (value: boolean) => {
      emit('update:modelValue', value)
    }

    const handleClose = () => {
      emit('update:modelValue', false)
      emit('close')
    }

    const emitConfirm = () => {
      emit('confirm')
    }

    return {
      handleUpdateModelValue,
      handleClose,
      emitConfirm,
    }
  },
})
</script>
<style lang="less">
@import url('~@/assets/style/base.less');
.dialog-class {
  text-align: left;
  // background: linear-gradient(180deg, #feefef 0%, rgba(255, 251, 251, 0) 100%);
  max-height: 80%;
  overflow: auto;
  box-shadow: 0px 12px 48px 16px rgba(0, 0, 0, 0.03), 0px 9px 28px 0px rgba(0, 0, 0, 0.05),
    0px 6px 16px -8px rgba(0, 0, 0, 0.08);
  border-radius: 2px;
  .el-dialog__header {
    display: none;
  }
  .el-dialog__body {
    background: #fff;
    border-bottom: 1px solid #e8e8e8;
    padding: 0;
    border-radius: 2px 2px 0px 0px;
  }
  .dialog-class__body {
    padding: 16px 20px 30px;
    // background: linear-gradient(180deg, #feefef 0%, rgba(255, 251, 251, 0) 100%);
    background: linear-gradient(180deg, var(--el-color-primary-light-9) 0%, rgba(255, 251, 251, 0) 100%);
    border-radius: 2px 2px 0px 0px;
    .custome_header {
      line-height: 28px;
      margin-bottom: 20px;
      font-size: 18px;
      font-family: MicrosoftYaHeiSemibold;
      color: #303133;
      display: flex;
      justify-content: space-between;
      i {
        width: 16px;
        cursor: pointer;
      }
      span {
        flex: 1;
        font-weight: bold;
      }
    }
  }
  .el-dialog__footer {
    padding: 15px 28px;
  }
}
</style>
